<template>
	<view class="container">
		<u-navbar :is-fixed='true' :title-bold='true' title='选择护航员' :border-bottom='false'></u-navbar>
	
		<view class="topic" >
			请选择一个护航员进行绑定
		</view>
		
		<view v-if="list.length<1" class="noData">
			暂无数据
		</view>
		
		<view v-else class="content" v-for="(item,idx) in list" :key="idx">
			<view class="card">
				<view class="top">
					<view class="c-t">
						<image src="@/static/img/review/icon.png" mode="widthFix"></image>
						<span>{{item.order_sn||''}}</span>
					</view>
					<span class="statu">{{item.status_text||''}}</span>
				</view>
				<u-line></u-line>
				<view class="center">
					<view class="userInfo">
						<u-avatar size='large' mode="square" :src="item.doctor_info.avatar"></u-avatar>
						<view class="dsc">
							<view class="d1">
								<!-- 医师 -->
								<span class="s1">{{item.doctor_info.username}}</span>
								<span>{{item.doctor_info.speciality||''}}</span>
							</view>
							<view class="d2">
								<span  class="s1"></span>
								<!-- 感谢 -->
								<span>{{item.goods_name}}</span>
								<span style="margin-left: 10rpx;">x{{item.num||0}}</span>
							</view>
							<view class="d2">
								<span class="s1"></span>
								<span>{{item.msg||''}}</span>
							</view>
							<view class="d2">
								<span class="s1"></span>
								<span>{{item.member_info||'未添加成员'}}</span>
							</view>
						</view>
					</view>
					<view class="button">
						<span @click.stop="goTo('/sub/center/mine/binding_member?id='+item.id)" >绑定成员</span>
					</view>
				</view>
				
			</view>
			<view class="bto">
				<span>有效期</span>{{item.start_time+'~'+item.end_time}}
			</view>
		</view>
		<!-- 提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {myProtect,memberList,myThank} from '@/api/index.js'
	export default{
		data(){
			return{
				list:[],
				t_index:0,
				keyword:'',
				page:1,
				user:{},
				docker_id:''
			}
		},
		
		onLoad(e) {
			this.page=1
			this.list=[]
			if(e.docker_id) {
				this.docker_id=e.docker_id
				this.init(e.docker_id)
			}
		},
		
		onReachBottom() { //监听页面触底函数
			this.init(this.docker_id)	
		},
		methods:{
			init(id){
				let that=this;
				let statusEffective = 1;
				myProtect({'doctor_id': that.docker_id,'status': statusEffective,'page':that.page,'per_page':10}).then(res=>{
					if(res.code==1){
						that.list=[...that.list , ...res.data.list.data]
						that.page++
						let arr=[]
						if(that.t_index==1){
							that.list.forEach(item=>{
								if(item.status==1){
									arr.push(item)
								}
							})
							that.list=arr
						}
						if(that.t_index==2){
							that.list.forEach(item=>{
								if(item.status==0){
									arr.push(item)
								}
							})
							that.list=arr
						}
					}else{
						that.$refs.uToast.show({
							title: res.msg
						})
					}
					
				})
				
			},
			select(idx){
				this.t_index=idx
				this.page=1
				this.init(this.docker_id)
			},
			search(){
				let that=this;
				if(that.keyword){
					let arr=[]
					if(that.list.length>0){
						that.list.forEach(item=>{
							if(item.member_info.indexOf(that.keyword)!=-1 || item.doctor_info.username.indexOf(that.keyword)!=-1){
								arr.push(item)
							}
						})
						that.list=arr
					}
				}else{
					that.list=[]
					that.page=1
					that.init(that.docker_id)
				}
				
			},
		
			goTo(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		height: 100vh;
		background-color: #EEE;
		
		.u-nav-slot{
			display: flex;
		}
		.noData{
			width: 100%;
			margin-top: 30%;
			text-align: center;
		}
		.topic{
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			margin: 20rpx 0;
			color: #3D3D3D;
			font-size: 15px;
			.t-item{
				text-align: center;
				padding: 16rpx 20rpx;
			}
			.select{
				border-bottom: 2px solid #6EC9E1;
				color: #6EC9E1;font-weight: bold;
			}
		}
		
		.content{
			margin-top: 20rpx;
			padding:0 20rpx;
			.card{
				padding: 20rpx;
				background-color: #FFF;
				border-radius: 20rpx;
				
				.top{
					display: flex;
					justify-content: space-between;	
					align-items: center;
					margin-bottom: 20rpx;font-size: 14px;
					.c-t{
						image{
							height: 12px;width: 12px;margin-right: 10rpx;
						}
						.statu{
							font-size: 18px;
						}
					}
				}
				
				.center{
					font-size: 14px;
					padding-bottom: 40rpx;
					.button{
						display: flex;
						justify-content: flex-end;
						span{
							border-radius: 30rpx;
							border: 1rpx solid #D8D8D8;
							padding: 0 20rpx;margin-left: 20rpx;
							height: 30px;line-height: 30px;
						}
					}
					.userInfo{
							margin: 30rpx 0;
							display:flex;	
						
							.dsc{
								margin-left: 16rpx;
								span{
									opacity: 0.5;
								}
								.d1{
									.s1{
										margin-right: 10rpx;font-size: 18px;font-weight: bold;									
										opacity: 1;
									}
								}
								.d2{
									display: flex;
									align-items: center;
									margin: 10rpx 0;
									.s1{
										margin-right: 10rpx;display: block;
										background-color: #151515;
										border-radius: 50%;height: 10rpx;width: 10rpx;
									}
								}
								
							}
					}
				}
			}
		}
		
		.bto{
			position: relative;
			top: -20rpx;
			display: inline-flex;
			align-items: center;
			width: 100%;
			background-color: #F5FDFF;
			color: #6EC9E1;
			padding: 20rpx;
			font-size: 15px;
			span{
				padding: 4rpx 10rpx; background-color: #6EC9E1;
				color: #EEE;border-radius: 30rpx;
				font-size: 13px;margin-right: 10rpx;
			}
		}
	}
</style>